<template>
  <a-card :bordered="false">
    <h3 class="addmoban-title" v-if="isHead">证件样式</h3>
    <div class="zjStyle">
      <a-radio-group default-value="a" v-if="isHead">
        <a-radio-button value="a"> 样式一 </a-radio-button>
      </a-radio-group>
      <section class="zjStyle-content">
        <header></header>
        <div class="zjStyle-content-main">
          <!-- <a-input
                  placeholder="证件标题"
                  style="text-align: center; margin: 6px 0 10px 0"
                  readonly
                  v-model="formData.card_name"
                /> -->
          <span class="card-span0">{{ formData.card_name }}</span>
          <div class="img-text">
            <div class="img-div">
              <span v-if="!formData.user_pic">证件照</span>
              <img :src="formData.user_pic" alt="" v-else />
            </div>
            <div class="text-right">
              <span class="card-span1">姓名</span>
              <p :class="isName ? 'p-text' : 'p-bg'">{{ formData.nick_name }}</p>

              <span class="card-span1">{{ formData.card_key_one }}</span>
              <p :class="formData.card_content_one ? 'p-text' : 'p-bg'">{{ formData.card_content_one }}</p>

              <span class="card-span1">{{ formData.card_key_two }}</span>
              <p :class="formData.card_content_two ? 'p-text' : 'p-bg'">{{ formData.card_content_two }}</p>

              <span class="card-span1">{{ formData.card_key_three }}</span>
              <p :class="formData.card_content_three ? 'p-text' : 'p-bg'">{{ formData.card_content_three }}</p>
            </div>
          </div>
          <div class="chiz">
            <span>持证说明：</span>
            <span class="card-span2">{{ formData.card_explain }}</span>
            <!-- <a-input readonly class="threeinput" v-model="formData.card_explain" /> -->
          </div>
          <div class="qianfa qfdw">
            <span>签发单位：</span>
            <a :href="formData.company_url" target="_blank">{{ formData.company_name || '-' }}</a>
            <div class="zhang" v-show="qianz">
              <img :src="imgvalue" alt="" />
            </div>
          </div>
          <div class="qianfa">
            <span>有效期至：</span>
            <span class="card-span3">{{ formData.end_ts || formData.failure_ts }}</span>
            <!-- <a-input readonly class="threeinput" v-model="formData.end_ts" /> -->
          </div>

          <div class="anquan">
            <p>安全提示</p>
            <ul>
              <li>
                <i></i>
                <p>公民身份核验</p>
                <i></i>
              </li>
              <li>
                <i></i>
                <p>组织机构核验</p>
                <i></i>
              </li>
              <li>
                <i></i>
                <p>组织授权核验</p>
                <i></i>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <div class="zjStyle-content-footer" v-if="isFooter">
        <div class="zjStyle-content-footer-qf">
          <span>签发单位</span>
          <a href="javascript:void(0)">{{ formData.company_name || '-' }}</a>
        </div>
        <div class="zjStyle-content-footer-qf">
          <span>有效期至</span>
          <span class="card-span4">{{ formData.end_ts }}</span>
          <!-- <a-input readonly class="threeinput" v-model="formData.end_ts" /> -->
        </div>
      </div>
    </div>
  </a-card>
</template>
<script>
export default {
  props: {
    formData: {
      type: Object,
    },
    qianz: {
      type: Boolean,
    },
    imgvalue: {
      type: String,
    },
    isName: {
      type: Boolean,
      default: false,
    },
    isFooter: {
      type: Boolean,
      default: false,
    },
    isHead: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    formData: function (newValue, oldValue) {
      console.log(newValue, oldValue)
    },
  },
}
</script>
<style lang="less" scoped>
.addmoban-title {
  position: relative;
  font-weight: bold;
  margin-bottom: 30px;
}

.addmoban-title::after {
  position: absolute;
  left: -7px;
  top: 50%;
  margin-top: -6px;
  content: '';
  display: block;
  width: 2px;
  height: 15px;
  background: #1890ff;
}

.zjStyle {
  width: 335px;
  box-sizing: border-box;

  &-content {
    margin-top: 20px;
    background: #ffffff;
    box-shadow: 3px 3px 7px 3px rgba(8, 8, 8, 0.1);
    border-radius: 10px;
    overflow: hidden;

    header {
      height: 22px;
      background: #0579fe;
    }

    input {
      border: none;
      font-size: 16px;
    }

    &-main {
      padding: 0 32px 28px 31px;
      position: relative;

      .threeinput {
        font-size: 12px;
        padding: 0;
        height: 13px;
      }

      .img-text {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .img-div {
          width: 99px;
          height: 136px;
          background: #446583;
          display: flex;
          align-items: center;
          padding: 5px;
          box-sizing: border-box;
          span {
            display: block;
            margin: 0 auto;
            width: 12px;
            color: #fff;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }

        .text-right {
          margin-left: 18px;
          background: #f6f5f5;
          padding: 6px 12px;
          width: 155px;
          box-sizing: border-box;

          input {
            background: #f6f5f5;
          }

          .p-bg {
            margin-bottom: 10px;
            height: 10px;
            background: #dee4e7;
            color: #999999;
          }
          .p-text {
            margin-bottom: 10px;
            // height: 10px;
            color: #999999;
          }
        }
      }

      .chiz {
        display: flex;
        align-items: top;
        justify-content: flex-start;
        margin-top: 15px;
        margin-bottom: 13px;

        span {
          display: inline-block;
          color: #ff9797;
          font-size: 12px;
          width: 60px;
        }

        input {
          color: #ff9797;
          flex: 1;
        }
      }

      .qianfa {
        font-size: 14px;
        display: flex;
        align-items: top;
        justify-content: flex-start;

        span {
          color: #999999;
          width: 70px;
        }

        a {
          font-size: 14px;
          flex: 1;
        }

        input {
          flex: 1;
        }
      }
      .qfdw {
        position: relative;
      }
      .zhang {
        position: absolute;
        right: -26px;
        top: -62px;
        width: 150px;
        height: 150px;
        z-index: 8;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .anquan {
        margin-top: 17px;
        border-top: 1px solid #e9e9e9;
        padding-top: 10px;

        p {
          font-size: 12px;
          color: #999999;
        }

        ul {
          padding-left: 0;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          li {
            width: 33%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            i {
              display: block;
            }

            i:first-child {
              width: 41px;
              height: 41px;
              background: url('../../assets/gm.png') no-repeat center;
              background-size: 41px 41px;
            }

            i:last-child {
              width: 12px;
              height: 12px;
              background: url('../../assets/xz.png') no-repeat center;
              background-size: 12px 12px;
            }

            p {
              line-height: 1;
              font-size: 12px;
              color: #999999;
              margin: 9px 0 3px;
            }
          }
        }
      }
    }
  }
}

.zjStyle-content-footer {
  margin-top: 13px;
  width: 335px;
  padding: 21px 16px 17px;
  background: #ffffff;
  box-shadow: 3px 3px 7px 3px rgba(8, 8, 8, 0.1);
  border-radius: 10px;
  font-size: 12px;

  &-qf:first-child {
    margin-bottom: 10px;
  }

  &-qf {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  span {
    line-height: 1;
    margin-right: 25px;
    color: #6e6e6e;
  }

  input {
    border: none;
    flex: 1;
    padding: 0;
    height: 14px;
  }
}

.zjzcj {
  line-height: 20px;
  margin-bottom: 0;
  color: #999999;
  padding-left: 27px;
}
.card-span0 {
  width: 100%;
  overflow: hidden;
  display: block;
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 22px;
  margin-top: 10px;
  text-align: center;
}

.card-span1 {
  width: 100%;
  overflow: hidden;
  display: block;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 2px;
}

.card-span2 {
  width: 212px !important;
  overflow: hidden;
  display: block !important;
}

.card-span3 {
  width: 200px !important;
  overflow: hidden;
  display: block !important;
}

.card-span4 {
  width: 200px !important;
  overflow: hidden;
  display: block !important;
}
</style>